<template>
    <div class="main fx">
        <div class="mainx fx">
            <div class="mainx_c fx">
                <div class="mainx_cr fx">

                    <div class="mainx_crx fx">
                        <div class="mainx_cr_u fx">
                            <div class="mainx_cr_uL fx">
                                企业管理 / 企业招聘信息 / 应聘信息
                            </div>
                        </div>

                        <el-table :data="datalist" :cell-style="{ 'font-size': '18px' }"
                            :row-style="{ 'font-size': '18px' }" :border stripe highlight-current-row max-height="800"
                            size="default" style="width: 100%;min-width: 800px;font-size: 18px;">
                            <el-table-column sortable type="index"  width="70" label="序号">
                            </el-table-column>
                            <el-table-column prop="name"  width="200" label="应聘者信息">
                            </el-table-column>
                            <el-table-column prop="education" sortable  label="最高学历"
                                width="120"></el-table-column>
                            <el-table-column prop="school"  label="毕业院校"
                                min-width="10%"></el-table-column>


                            <!--操作按钮开始-->
                            <el-table-column label="操作"  width="250">
                                <template #default="scope">
                                    <el-button type="info" size="default"
                                        @click="toInfo(scope.$index, scope.row)">详细信息</el-button>
                                    <el-button type="success" size="default" v-if="!scope.row.is_employ"
                                        @click="handleHire(scope.$index, scope.row)">录用</el-button>
                                    <el-button type="danger" size="default" v-if="scope.row.is_employ" :disabled="true" style="background-color: #3e72adff;"
                                        >已录用</el-button>
                                </template>
                            </el-table-column>
                            <!--操作按钮结束-->

                        </el-table>

                        <!--分页-->
                        <!-- <el-pagination @current-change="handleCurrentChange" :current-page="page1.currentPage"
                            :page-size="page1.pageSize" background layout="prev, pager, next" :total="page1.totalCount"
                            style="float: right; margin: 10px 20px 0 0">
                        </el-pagination> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { useAccountStore } from "@/stores/account";
import request from "@/api/http";
import {
    ElMessage
} from 'element-plus'
import { initJobInfo, acceptResume } from '@/api/path/tl/job.js'
export default {
    data() {
        return {
            datalist: [
                {
                    user_id: 45,
                    name: '张三',
                    education: '组长',
                    school: '13904057582',
                    is_employ: false,
                },
            ], //表格数据
            accountStore: useAccountStore(),
            accept_count: 0,
            left_count: 0,
        }
    },
    mounted() {
        console.log("Candidates.vue mounted")
        console.log(this.accountStore.enterprise.enterpriseId)
        console.log(this.accountStore.enterprise)
        this.init();
    },
    methods: {
        // 初始化招聘信息列表 TODO
        init() {
            if (this.job_id == -1) {
                ElMessage.error('请先选择招聘信息')
                return
            }
            while (this.datalist.length > 0) {
                this.datalist.pop()
            }
            initJobInfo(this.job_id).then(res => {
                console.log("initJobInfo", res)
                let list = res.list
                let count = 0;
                for (let i = 0; i < list.length; i++) {
                    let it = list[i]
                    let info_item = {
                        user_id: it.user.id,
                        name: it.user.name,
                        education: it.user.education,
                        school: it.user.school,
                        is_employ: it.is_employ,
                        resume_id: it.id,
                    }
                    if (it.is_employ) {
                        count++;
                    }
                    this.datalist.push(info_item)
                }
                this.accept_count = count;
                this.left_count = this.job_count
            }).catch(err => {
                console.log(err)
            })
        },
        handleHire(index, row) {
            console.log("handleHire", index, row)
            if (this.left_count <= 0) {
                ElMessage.error(`招聘人数已满，当前招聘人数：${this.accept_count}`)
                return
            }
            this.$confirm("确认录用该员工吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    acceptResume(row.resume_id).then(res => {
                        console.log("acceptResume", res)
                        this.datalist[index].is_employ = true;
                        this.accept_count++;
                        ElMessage.success(`录用成功，当前招聘人数：${this.accept_count}`)
                    }).catch(err => {
                        console.log(err)
                        ElMessage.error(`录用失败，当前招聘人数：${this.accept_count}`)
                    })
                })
        },
        toInfo(index, row) {
            console.log(index, row)
            this.$router.push({ path: '/personalinfo', query: { id: row.user_id, exp: true } })
        },
    },
    computed: {
        // 计算属性
        job_id() {
            return this.$route.query.job_id || this.$route.params.job_id || -1
            //return 24
        },
        job_count() {
            return this.$route.query.job_count || this.$route.params.job_count || -1
            //return 2
        }
    }
}
</script>

<style scoped>
.fx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.main {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}

.mainx {
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px 30px;
    padding-top: 0px;
    background-color: #f1f3f5f7;

}

.mainx_u {
    height: 60px;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: bold;
    color: #000000f7;
    letter-spacing: 4px;
    box-sizing: border-box;
    padding-right: 20px;

    background-color: #fffffff7;
}

.mainx_ul {
    font-weight: bold;
    letter-spacing: 4px;
}

.mainx_ur {
    flex-shrink: 0;
    width: auto;
    height: 30px;
    letter-spacing: 2px;
    color: #fffffff7;
    border: 1px solid #00aafff7;
    background-color: #00aafff7;
    cursor: pointer;
    font-size: 14px;
    padding: 0px 20px;
    border-radius: 6px;
}

.mainx_ur:hover {
    background-color: #009debf7;
    color: #fffffff7;
}

.mainx_c {
    margin-top: 20px;
    align-items: flex-start;
    height: 100%;
}

.mainx_cl {
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: 130px;
    flex-shrink: 0;
    background-color: #009debf7;
    background-color: #fffffff7;
}

.mainx_cl1 {
    margin-top: 5px;
    height: 50px;
    box-sizing: border-box;
    color: #000000f7;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
}

.mainx_cl1:first-of-type {
    margin-top: 0px;
}

.mainx_cl1:hover {
    color: #fffffff7;
    background-color: #009debf7;
}

.actv {
    color: #fffffff7;
    background-color: #009debf7;
}


.mainx_cr {
    /* margin-left: 20px; */
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    background-color: #fffffff7;
}

.mainx_crx {
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0 20px;
}

.mainx_cr_u {
    min-height: 100px;
    height: auto;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
}

.mainx_cr_uL {
    margin-top: 20px;
    float: left;
    width: 100%;
    height: 40px;
    font-weight: bold;
    justify-content: flex-start;
}

.mainx_cr_uR {
    justify-content: flex-end;
}

.mainx_cr_uR1 {
    flex-shrink: 0;
    width: auto;
    height: 30px;
    letter-spacing: 2px;
    color: #fffffff7;
    border: 1px solid #00aafff7;
    background-color: #3e72adff;
    cursor: pointer;
    font-size: 14px;
    padding: 0px 20px;
    border-radius: 6px;
}

.mainx_cr_uR1:hover {
    background-color: #009debf7;
    color: #fffffff7;
}




.padd {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
    flex-direction: column;
    justify-content: flex-start;
}

.padd_u {
    margin-top: 20px;
    height: 40px;
    width: 80%;
}

.padd_u:first-of-type {
    margin-top: 0px;
}

.padd_ul {
    width: 140px;
    flex-shrink: 0;
    background-color: #f1f3f7;
}

.padd_ur {
    background-color: #ffff00f7;
}

.padd_ur input {
    width: 100%;
    height: 100%;
    border: 2px solid #f1f3f7;
    padding-left: 30px;
    box-sizing: border-box;
}

.padd_ur input:focus {
    /* border: 1px solid #1aa094; */
    outline: 1px solid #00aaff;
}

.btn {
    width: 60%;
    height: 40px;
    border-radius: 8px;
    background-color: #3e72adff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-top: 30px;
}

.mylabel {
    font-size: 28px;
}
</style>